<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>抽奖</title>
    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="temp/bootstrap.css" rel="stylesheet"/>
    <link href="css/draw.css" rel="stylesheet"/>
</head>
<body>

<img src="images/abc.jpg" class="img-responsive">
<div id="app" class="draw-bg container-fluid ">
    <div class="row">
        <div class="col-lg-3 text-center">
            <form class="form-inline" style="font-size: 24px;" role="form">
                <label for="drawSelect">奖项</label>
                <select class="form-control" id="drawSelect" v-model="selectedAward">
                    <option v-for="option in draws" :value="option">{{option.name}}</option>
                </select>
            </form>
            <div>
                <p style="font-size: 24px;color: red;">{{selectedAward.desc}}</p>
            </div>
            <div class="draw-container" style="padding: 30px;">
                <img id="interval-img" :src="currentImg" class="img-responsive" style="border-radius: 100%;">
            </div>
            <p style="font-size: 24px;color: red;">{{currentName}}</p>
            <div class="draw-button" id="start-draw-btn" @click="startDraw()">{{currentText}}</div>
        </div>
        <div class="col-lg-1">
            <img src="images/sperate.png" class="img-responsive" @click="showQrCode = !showQrCode">
        </div>
        <div class="col-lg-8 pre-scrollable" style="max-height: 1000px;">
            <!--特等奖-->
            <div class="row award-text" @click="specialDrawsShow = !specialDrawsShow">
                {{draws[0].name}}&nbsp;&nbsp;{{specialDraws.length}}/{{draws[0].count}}
                <a style="font-size: 14px; font-weight: bold;color:gray;">{{specialDrawsShow ? '收起' : '展开'}}
                    &nbsp;&nbsp;{{draws[0].desc}}</a>
            </div>
            <div class="row" v-if="specialDrawsShow">
                <div class="col-lg-2 text-center draw-img-p" v-for="item in specialDraws">
                    <img :src="item.headimgurl" style="" class="img-responsive">
                    <p>{{item.nickname}}</p>
                </div>
            </div>

            <!--一等奖-->
            <div class="row award-text" @click="firstDrawsShow = !firstDrawsShow">
                {{draws[1].name}}&nbsp;&nbsp;{{firstDraws.length}}/{{draws[1].count}}
                <a style="font-size: 14px; font-weight: bold;color:gray;">{{firstDrawsShow ? '收起' : '展开'}}
                    &nbsp;&nbsp;{{draws[1].desc}}</a>
            </div>
            <div class="row" v-if="firstDrawsShow">
                <div class="col-lg-2 text-center draw-img-p" v-for="item in firstDraws">
                    <img :src="item.headimgurl" class="img-responsive">
                    <p>{{item.nickname}}</p>
                </div>
            </div>

            <!--二等奖-->
            <div class="row award-text" @click="secondDrawsShow = !secondDrawsShow">
                {{draws[2].name}}&nbsp;&nbsp;{{secondDraws.length}}/{{draws[2].count}}
                <a style="font-size: 14px; font-weight: bold;color:gray;">{{secondDrawsShow ? '收起' : '展开'}}
                    &nbsp;&nbsp;{{draws[2].desc}}</a>
            </div>
            <div class="row" v-if="secondDrawsShow">
                <div class="col-lg-2 text-center draw-img-p" v-for="item in secondDraws">
                    <img :src="item.headimgurl" class="img-responsive">
                    <p>{{item.nickname}}</p>
                </div>
            </div>

            <!--三等奖-->
            <div class="row award-text" @click="!thirdDrawsShow">
                {{draws[3].name}}&nbsp;&nbsp;{{thirdDraws.length}}/{{draws[3].count}}
                <a style="font-size: 14px; font-weight: bold;color:gray;">{{thirdDrawsShow ? '收起' : '展开'}}
                    &nbsp;&nbsp;{{draws[3].desc}}</a>
            </div>
            <div class="row" v-if="thirdDrawsShow">
                <div class="col-lg-2 text-center draw-img-p" v-for="item in thirdDraws">
                    <img :src="item.headimgurl" class="img-responsive">
                    <p>{{item.nickname}}</p>
                </div>
            </div>

            <div v-if="showQrCode">
                <img src="images/qrcode.jpeg" class="img-responsive" >
                <span class="award-text">关注微信公众号 "连邦经典" ，加入今晚抽奖盛典！</span>
            </div>

        </div>
    </div>
    <audio id="music" src="">
        您的浏览器不支持 audio 标签。
    </audio>
</div>
<script src="random.js"></script>
<script src="//cdn.bootcss.com/vue/2.1.3/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
<!--<script src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>-->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            allUsers: [],
            showQrCode: true,
            message: 'Hello Vue!',
            drawTimer: null,
            i: 0,
            draws: [
                {id: 'specialDraws', name: '特等奖', count: 1, desc: '特等奖一名，水圣科技七级净水机一台，价值3980元'},
                {id: 'firstDraws', name: '一等奖', count: 2, desc: '一等奖2名，三天两夜的游轮票，价值2560元'},
                {id: 'secondDraws', name: '二等奖', count: 22, desc: '二等奖22名，杜康酒12瓶，价值400元，马术票10张，价值400元'},
                {id: 'thirdDraws', name: '三等奖', count: 20, desc: '三等奖20名，LED灯5个，价值300元，红酒礼盒15个，价值300元'}
            ],
            currentImg: '', currentText: '开始抽奖', currentName: '',
            selectedAward: {id: 'thirdDraws', name: '三等奖', count: 20, desc: '三等奖20名，LED灯5个，价值300元，红酒礼盒15个，价值300元'},
            specialDraws: [], specialDrawsShow: true,
            firstDraws: [], firstDrawsShow: true,
            secondDraws: [], secondDrawsShow: true,
            thirdDraws: [], thirdDrawsShow: true,
            currentIndex: 0,
            imgUrls: [{url: 'draw/photo/01.jpg'}, {url: 'draw/photo/02.jpg'}, {url: 'draw/photo/03.jpg'}, {url: 'draw/photo/04.jpg'}, {url: 'draw/photo/05.jpg'}]
        },
        beforeCreate: function () {
            this.$http.get('/wx/allUsers').then(function (datas) {
                this.allUsers = datas.data;
                console.log('获取到用户个数：' + this.allUsers.length);
            }, function (err) {
                console.log(err);
            });
        },
        methods: {
            startDraw: function () {
                var $this = this;
                if (this.drawTimer) {
                    play_sound('sound/end.mp3');
                    $this.currentIndex = randomData(1, $this.allUsers.length);
                    $this.currentText = '开始抽奖';
                    clearInterval($this.drawTimer);
                    $this.drawTimer = null;
                    $this.currentImg = $this.allUsers[$this.currentIndex].headimgurl;
                    $this.currentName = $this.allUsers[$this.currentIndex].nickname;
                    $this[$this.selectedAward.id].push($this.allUsers[$this.currentIndex]);
                    $this.allUsers.splice($this.currentIndex, 1); // 去掉已经抽中的用户
                } else {
                    play_sound('sound/ing.mp3');
                    $this.currentText = '暂停';
                    this.drawTimer = window.setInterval(function () {
                        $this.currentIndex = $this.i++ % 5;
                        $this.currentImg = $this.imgUrls[$this.currentIndex].url;
                    }, 50);
                }
            }
        }
    });
</script>
</body>
</html>